<template>
  <el-dialog
    v-model="dialogVisible"
    :show-close="false"
    custom-class="t_landing_page_preview"
    width="360px"
  >
    <iframe v-if="params.type === 'iframe'" :src="params.url" frameborder="0" />
    <img v-else :src="params.url" />
    <template #footer>
      <div class="landing_name ellipsis">{{ params.name }}</div>
    </template>
  </el-dialog>
</template>

<script>
import {reactive, toRefs} from "vue";

export default {
  name: "tLandingPagePreview",
  setup() {
    const state = reactive({
      dialogVisible: false,
      params: {}
    })
    const show = (params) => {
      state.params = params
      state.dialogVisible = true
    }
    return {
      ...toRefs(state),
      show
    }
  }
}
</script>

<style lang="scss">
.t_landing_page_preview{
  background: rgba(0, 0, 0, 0);
  box-shadow: none;
  .el-dialog__header{
    display: none;
  }
  .el-dialog__body{
    padding: 10px;
    width: 320px;
    height: 587px;
    background: #ffffff;
    border-radius: 27px;
    box-shadow: 0 3px 6px 0 rgba(28,39,80,0.16);
    overflow: auto;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    &::-webkit-scrollbar{
      display: none;
    }
    >img{
      display: block;
      // max-height: 100%;
      max-width: 100%;
      border-radius: 20px;
    }
    >iframe{
      width: 100%;
      height: 100%;
      overflow: auto;
    }
  }
  .el-dialog__footer{
    padding: 0 !important;
    margin-top: 8px;
    color: #ffffff;
    .landing_name{
      text-align: center;
    }
  }
}
</style>
